<!-- 名片详情 -->
<template>
	<view>
		<image class="details-img" :src="dataForm.logo" mode="widthFix"></image>
		<view class="card-detail">
			<view class="card-details">
				<view class="card-details-item">
					<view class="title">
						<view class="title-top ">
							<view class="user-logo"><image :src="dataForm.headimgurl" class="user-logo-img"></image></view>
							<view class="user-title">
								<view class="user-name">{{ dataForm.name }}</view>
								<view class="title-post">{{ dataForm.duties }}</view>
								<view class="title-post">{{ dataForm.company }}</view>
							</view>
						</view>
						<view class="user-detail">
							<view class="user-detail-item">
								<image src="../static/orange/ph.jpg" mode="" class="user-detail-item-img"></image>
								<view style="flex:1">{{ dataForm.phone }}</view>
							</view>
							<view class="user-detail-item">
								<image src="../static/orange/em.jpg" mode="" class="user-detail-item-img"></image>
								<view style="flex:1">{{ dataForm.email }}</view>
							</view>
							<view class="user-detail-item">
								<image src="../static/orange/dz.jpg" mode="" class="user-detail-item-img"></image>
								<view style="flex:1">{{ dataForm.address }}</view>
							</view>
						</view>
					</view>

					<view class="line"></view>

					<view class="exhibition">
						<view class="exhibition-item" @click="collection">
							<image class="exhibition-img" src="../static/orange/c-sc.jpg"></image>
							<view class="exhibition-title">{{ dataForm.is_follow == 1 ? '已收藏' : '收藏' }}</view>
						</view>
						<view class="exhibition-item">
							<image class="exhibition-img" src="../static/orange/c-gz.jpg"></image>
							<view class="exhibition-title">关注 {{ dataForm.my_collection ? dataForm.my_collection : 0 }}</view>
						</view>
						<view class="exhibition-item">
							<image src="../static/orange/c-liulan.jpg" class="exhibition-img"></image>
							<view class="exhibition-title">浏览 {{ dataForm.view_count }}</view>
						</view>
					</view>
				</view>

				<view class="user-info">
					<view class="user-info-item">
						<!-- 用户基础信息 -->

						<view class="user-detail-info">
							<view class="user-detail-info-item" v-for="(item, index) in list" :key="index" @click="onCopyContent(dataForm[item.value])">
								<view class="u-d">
									<image :src="item.icon" class="user-detail-info-img"></image>
									<text>{{ item.name }}</text>
								</view>
								<view class="p-phone">{{ dataForm[item.value] }}</view>
							</view>
						</view>

						<!-- 发送名片或者保存通讯录 -->
						<view class="visiti">
							<view class="visit-item-one flex-c-c " @click="onShare">
								发名片
								<!-- <button class="share-btn" type="default" open-type='share'></button> -->
							</view>
							<view class="visit-item-two flex-c-c" @click="addPhone(dataForm)">保存至通讯录</view>
						</view>
					</view>
				</view>

				<view class="card-details-b">
					<view class=" company-profile" v-if="dataForm.introduce">
						<view class="personal-pdlr30">
							<view class="company-profile-title personal-video-and-company"><view class="company-p-title">介绍</view></view>
							<view class="" style="width: 100%;min-height: 200rpx;word-wrap:break-word"><rich-text selectable :nodes="dataForm.introduce"></rich-text></view>
						</view>
					</view>
					<view class="video" v-if="dataForm.video">
						<view class="personal-pdlr30">
							<view class="company-profile-title personal-video-and-company"><view class="company-p-title">视频</view></view>
							<view class="video-v"><video id="myVideo" :src="dataForm.video" :danmu-btn="false" enable-play-gesture controls object-fit="contain"></video></view>
						</view>
					</view>
					<view class="d-image" v-if="dataForm.imgList">
						<view class="personal-pdlr30">
							<view class="company-profile-title personal-video-and-company"><view class="company-p-title">图片</view></view>
							<image :src="el" mode="widthFix" class="del-image" @click="onPreImg(index)" v-for="(el, index) in dataForm.imgList" :key="index"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import cardMixin from '../mixins/index.js';
export default {
	props: {
		data: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	mixins: [cardMixin],
	data() {
		return {
			list: [
				{
					icon: require('../static/orange/c-phone.jpg'),
					name: '复制电话',
					value: 'phone'
				},
				{
					icon: require('../static/orange/c-wx.jpg'),
					name: '复制微信',
					value: 'weixin'
				},
				{
					icon: require('../static/orange/c-qq.jpg'),
					name: '复制QQ',
					value: 'qq'
				},
				{
					icon: require('../static/orange/c-address.jpg'),
					name: '复制地址',
					value: 'address'
				}
			],
			list1: [
				{
					icon: '',
					name: '关注'
				},
				{
					icon: '',
					name: '收藏'
				},
				{
					icon: '',
					name: '分享'
				}
			]
		};
	}
};
</script>

<style lang="scss" scoped>
.details-img {
	position: relative;
	width: 750rpx;
}
.card-detail {
	background-color: #f5f5f5;
	width: 100%;
	min-height: 100vh;
	top: -200rpx;
}
.card-details {
	position: relative;
	padding-top: 1rpx;
	width: 100%;
	z-index: 30;
}

.mt-30 {
	margin-top: 30rpx;
}

.del-image {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 20rpx;
}

.d-image {
	border-top: 10rpx solid #f5f5f5;
}

#myVideo {
	width: 100%;
	height: 100%;
}

video {
	width: 100%;
	height: 100%;
}

.personal-pdlr30 {
	border-radius: 16rpx;
	background-color: #fff;
	padding: 0 30rpx;
	border-bottom: 24rpx solid #f5f5f5;
}

.company-profile {
	background-color: #ffffff;
}

.video .personal-pdlr30 {
	border-bottom: 0;
}

.video-v {
	width: 100%;
	height: 388rpx;
	border-radius: 10rpx;
	background: #f4f4f4;
}

.follow {
	position: relative;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	height: 130rpx;
}

.follow-title {
	font-size: 24rpx;
}

.flex {
	display: flex;
}

.flex-c-sb {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-c-c {
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-details-item {
	padding: 40rpx 44rpx 45rpx;
	width: 690rpx;
	// height: 331rpx;
	background: #ffffff;
	box-shadow: 0 0 16rpx 0 rgba(173, 173, 173, 0.45);
	border-radius: 16rpx;
	margin: 30rpx auto 0;

	.title {
		position: relative;
		vertical-align: bottom;

		.title-top {
			display: flex;
			margin-bottom: 27rpx;
			padding-bottom: 40rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.user-logo {
				width: 140rpx;
				height: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #ffe5ca;
				border-radius: 50%;

				.user-logo-img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}

			.user-title {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 27rpx;
			}

			.user-name {
				font-size: 36rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #222222;
			}

			.title-post {
				word-break: break-all;
				font-size: 26rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #222222;
			}
		}

		.user-detail {
			.user-detail-item:nth-last-child(1) {
				margin-bottom: 0;
			}

			.user-detail-item {
				display: flex;
				align-items: center;
				margin-bottom: 25rpx;
				line-height: 29rpx;

				.user-detail-item-img {
					width: 27rpx;
					height: 27rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
}

.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}

.share-btn {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	opacity: 0;
}

/deep/ .scroll-view::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.function-key {
	position: relative;
	display: flex;
	justify-content: space-between;
	padding: 50rpx 110rpx 30rpx;

	.function-key-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;

		.function-key-img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-bottom: 10rpx;
		}

		margin-top: 20rpx;
	}

	.flex-c-c {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.visiti {
	margin-bottom: 36rpx;
	padding: 0 64rpx;
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
	box-sizing: border-box;

	.visit-item-one {
		position: relative;
		width: 260rpx;
		height: 80rpx;
		background: #ff824b;
		border-radius: 8rpx;
		color: #ffffff;
	}

	.visit-item-two {
		color: #ff824b;
		width: 260rpx;
		height: 80rpx;
		border-radius: 8rpx;
		border: 1px solid #ff824b;
	}
}

.exhibition {
	padding: 0 20rpx;
	margin-top: 33rpx;
	display: flex;
	justify-content: space-between;

	.exhibition-item {
		display: flex;
		align-items: center;

		.exhibition-img {
			width: 29rpx;
			height: 29rpx;
			margin-right: 9rpx;
		}

		.exhibition-img-see {
			width: 40rpx;
			height: 30rpx;
			margin-right: 9rpx;
		}
	}
}

.line {
	width: 100%;
	height: 1rpx;
	margin-top: 25rpx;
	background-color: #eeeeee;
}

.company-profile-img {
	width: 46rpx;
	height: 36rpx;
	margin-right: 19rpx;
}

.personal-video-and-company {
	display: flex;
	width: 100%;
	font-size: 30rpx;
	padding: 30rpx 0;
}

.user-info {
	margin: 22rpx 0;
	padding: 0 30rpx;
}

.user-info-item {
	padding: 37rpx 0;
	width: 100%;
	background: #ffffff;
	border-radius: 16rpx;
}

.user-detail-info {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 60rpx;
}

.exhibition-title {
	display: inline-block;
	color: #999;
}

.user-detail-info-img {
	width: 29rpx;
	height: 29rpx;
	margin-right: 13rpx;
	display: inline-block;
}

.user-detail-info-item {
	width: 50%;
	margin-bottom: 36rpx;
}

.user-detail-info-item:nth-of-type(2n) {
	padding-left: 54rpx;
}

.p-phone {
	padding-left: 41rpx;
	word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #999999;
	margin-top: 8rpx;
}

.company-p-title {
	position: relative;
	text-align: center;
	margin: 0 auto;
	font-size: 34rpx;
	font-family: PingFang;
	font-weight: 700;
	color: #222222;
}

.company-p-title::after {
	position: absolute;
	top: 50%;
	left: -100rpx;
	transform: translateY(-50%);
	content: '';
	width: 80rpx;
	height: 2rpx;
	background: #e4e4e4;
}

.company-p-title::before {
	position: absolute;
	top: 50%;
	right: -100rpx;
	transform: translateY(-50%);
	content: '';
	width: 80rpx;
	height: 2rpx;
	background: #e4e4e4;
}

.u-d {
	display: flex;
	align-items: center;
}

.card-details-b {
	padding: 0 30rpx;
}
</style>
